<template>
	<div class="desktop-search-input-pc">
        <el-input v-model="searchParam.title" class="search-input" :prefix-icon="Search" placeholder="搜索文档" @keyup.enter="getKnowledgeList"/>
				<el-button type="success" @click="addKnowledge">新增</el-button>
			</div>

    <div class="comm-layout-wrap">
    <div class="m-header"><span>我的知识</span></div>
  
    <template v-if="knowledgeList.length === 0" >
      <div class="tmall-empty">
        <div class="tmall-empty-img"></div>
        <div class="tmall-tell-us">暂无知识，请新建知识库，添加知识</div>
      </div>
    </template>
    <template v-else>
      <div class="st-contenter">
        <div class="st-list">
          <div class="st-item" v-for="item in knowledgeList" :key="item.id">
            <div class="st-top">
              <div class="st-box">
                <img :src="item.cover" alt="">
              </div>
            </div>
            <div class="st-bottom">
              <div class="st-title">
                <el-icon class="title-icon" size="18" color="#409eff"><List /></el-icon>
                <span class="title-name">{{ item.title }}</span>
              </div>
            </div>
            <div class="hover-btn-wrap">
              <el-tooltip effect="light" content="预览" placement="bottom">
                <el-button circle type="primary" :icon="View"></el-button>
              </el-tooltip>
              <el-tooltip effect="light" content="编辑" placement="bottom">
                <el-button circle type="primary" :icon="Edit"></el-button>
              </el-tooltip>
              <el-tooltip effect="light" content="删除" placement="bottom">
                <el-button circle type="danger" :icon="DeleteFilled" />
              </el-tooltip>
            </div>
          </div>
        </div>
      </div>
    </template>  
  </div>
</template>

<script setup lang="ts">
import { Search, Edit, List, DeleteFilled, View} from '@element-plus/icons-vue'
import { ref, onMounted } from 'vue';
import { knowledgeApi } from '@/api/knowledge';

const searchParam = {
	title: ''
}

const knowledgeList = ref<any>([])

const getKnowledgeList = async () => {
  const res = await knowledgeApi.getKnowledgeList()
  knowledgeList.value = res.data
}

const addKnowledge = async () => {
  const res = await knowledgeApi.create({
    title: '新文档',
    content: '新文档内容',
  })
}

onMounted(() => {
  getKnowledgeList()
})

</script>



<style lang="less" scoped>
.desktop-search-input-pc{
  display: flex;
  flex: 1 1;
  margin-right: auto;
  max-width: 720px;
  min-width: 220px;
  transform: translateY(-10px);
  margin-top: -40px;

  .search-input{
    height: 40px;
  }

  :deep(.el-button) {
    height: 38px;
    line-height: 38px;
    margin-left: 15px;
  }
}

.st-contenter{
  height: calc(100vh - 120px);
  overflow-y: auto;
}
@media screen and (min-width: 1300px) {
  .st-list {
    grid-template-columns: repeat(4, 1fr)!important;
  }
}
@media screen and (min-width: 1500px) {
  .st-list {
    grid-template-columns: repeat(5, 1fr)!important;
  }
}
@media screen and (min-width: 1600px) {
  .st-list {
    grid-template-columns: repeat(6, 1fr)!important;
  }
}

.st-list {
  grid-gap: 16px;
  align-items: start;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  justify-content: space-between;
  padding: 20px ;
  

  .st-item {
    position: relative;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 2px;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, .08);
    box-sizing: border-box;
    cursor: pointer;
    height: auto;
    opacity: 1;
    overflow: hidden;
    position: relative;
    width: 100%;
  }

  .st-top {
    padding: 12px 12px 0;

    .st-box {
      position: relative;
      border: 1px solid rgba(0, 0, 0, .04);
      border-radius: 4px;
      box-sizing: content-box;
      overflow: hidden;
      width: 100%;
      padding-bottom: 56.25%;

      img{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
      }
    }
  }

  .st-bottom {
    display: flex;
    flex-direction: column;
    padding: 8px 10px;
    background: #fff;

    .st-title{
      display: flex;
      align-items: center;
      height: 20px;
      .title-icon{
        height: 20px;
        margin-right: 4px;
        width: 20px;
      }
      .title-name{
        color: rgba(0,0,0,.88);
        font-size: 14px;
        line-height: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }

  .st-item:hover {
    .hover-btn-wrap {
      opacity: 1;
      visibility: visible;
    }
  }

  .hover-btn-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0 24px;
    position: absolute;
    left: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .64);
    transition: all .1s;
    cursor: auto;
    z-index: 1;
    opacity: 0;
    visibility: hidden;

    .el-button {
      font-size: 16px;
    }
  }
}

.tmall-empty{
  align-items: center;
  display: flex;
  flex-direction: column;

  .tmall-empty-img{
    background-image: url(@/assets/img/empty.png);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    height: 220px;
    margin-bottom: 4px;
    width: 220px;
  }
  .tmall-tell-us {
    margin: 40px 0;
    text-align: center;
    font-size: 16px;
    color: rgba(0,0,0,.4);
  }
}

.m-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid rgba(0, 0, 0,.04);
  border-bottom: 1px solid var(--border-weak, rgba(0, 0, 0,.04));
  font-size: 16px;
}
</style>
